{% extends "base.html" %}

{% block title %}首页 - 记账系统{% endblock %}

{% block content %}
    <h2>添加新账目</h2>
    <form method="post" action="{{ url_for('index') }}">
        <div class="form-group">
            <label for="date">日期 (YYYY/M/D):</label>
            <input type="text" id="date" name="date" required placeholder="例如 2024/08/01">
        </div>
        <div class="form-group">
            <label for="amount">金额:</label>
            <input type="number" id="amount" name="amount" step="0.01" required placeholder="例如 50.00">
        </div>
        <div class="form-group">
            <label for="main_category">大分类:</label>
            <input type="text" id="main_category" name="main_category" required placeholder="例如 餐饮, 交通">
        </div>
        <div class="form-group">
            <label for="sub_category">二级分类 (可选):</label>
            <input type="text" id="sub_category" name="sub_category" placeholder="例如 午餐, 地铁票">
        </div>
        <div class="form-group">
            <label for="payment_method">支付方式 (可选):</label>
            <input type="text" id="payment_method" name="payment_method" placeholder="例如 支付宝, 微信支付">
        </div>
        <div class="form-group">
            <label for="notes">备注 (可选):</label>
            <textarea id="notes" name="notes" placeholder="例如 和朋友聚餐"></textarea>
        </div>
        <p><button type="submit">添加账目</button></p>
    </form>

    <hr>

    <h2>查询与筛选账目</h2>
    <form method="get" action="{{ url_for('index') }}" class="filter-form">
        <div>
            <label for="date_start">开始日期:</label>
            <input type="text" id="date_start" name="date_start" placeholder="YYYY/M/D" value="{{ query_params.get('date_start', '') }}">
        </div>
        <div>
            <label for="date_end">结束日期:</label>
            <input type="text" id="date_end" name="date_end" placeholder="YYYY/M/D" value="{{ query_params.get('date_end', '') }}">
        </div>
        <div>
            <label for="amount_min">最小金额:</label>
            <input type="number" id="amount_min" step="0.01" name="amount_min" value="{{ query_params.get('amount_min', '') }}">
        </div>
        <div>
            <label for="amount_max">最大金额:</label>
            <input type="number" id="amount_max" step="0.01" name="amount_max" value="{{ query_params.get('amount_max', '') }}">
        </div>
        <div>
            <label for="q_main_category">大分类 (模糊):</label>
            <input type="text" id="q_main_category" name="main_category" value="{{ query_params.get('main_category', '') }}">
        </div>
        <div>
            <label for="sort_by">排序字段:</label>
            <select id="sort_by" name="sort_by">
                <option value="date" {% if query_params.get('sort_by', 'date') == 'date' %}selected{% endif %}>日期</option>
                <option value="amount" {% if query_params.get('sort_by') == 'amount' %}selected{% endif %}>金额</option>
                <option value="main_category" {% if query_params.get('sort_by') == 'main_category' %}selected{% endif %}>大分类</option>
            </select>
        </div>
        <div>
            <label for="sort_order">排序顺序:</label>
            <select id="sort_order" name="sort_order">
                <option value="DESC" {% if query_params.get('sort_order', 'DESC').upper() == 'DESC' %}selected{% endif %}>降序</option>
                <option value="ASC" {% if query_params.get('sort_order', '').upper() == 'ASC' %}selected{% endif %}>升序</option>
            </select>
        </div>
        <div>
            <button type="submit">查询/排序</button>
            <a href="{{ url_for('index') }}" class="button-link button-secondary" style="margin-left: 10px;">清空筛选</a>
        </div>
    </form>

    <h2>账目列表</h2>
    {% if expenses %}
    <table>
        <thead>
            <tr>
                <th>日期</th>
                <th>金额</th>
                <th>大分类</th>
                <th>二级分类</th>
                <th>支付方式</th>
                <th>备注</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        {% for expense in expenses %}
            <tr>
                <td>{{ expense.date.strftime('%Y-%m-%d') if expense.date else '' }}</td>
                <td>{{ "%.2f"|format(expense.amount) }}</td>
                <td>{{ expense.main_category }}</td>
                <td>{{ expense.sub_category if expense.sub_category else '-' }}</td>
                <td>{{ expense.payment_method if expense.payment_method else '-' }}</td>
                <td>{{ expense.notes if expense.notes else '-' }}</td>
                <td>
                    <a href="{{ url_for('edit_expense', id=expense.id) }}" class="button-link" style="background-color: #ffc107; color: #212529;">编辑</a>
                    <a href="{{ url_for('delete_expense', id=expense.id) }}" class="button-link button-danger" onclick="return confirm('确定删除这条记录吗?');">删除</a>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p>没有符合条件的账目记录，或账本为空。</p>
    {% endif %}
{% endblock %}
